@import "../global/mixin.less";
// 下面仅仅写了，本主题打算定制修改地方的类名。如果修修改的需求可以改其他地方
#vcomments {
  // 编辑框，两个状态，未回复，在上面，回复别人在别人下面，外层容器不同(省略不写)
  .vwrap {
    // 编辑框，包括标标签、预览icon
    .vedit {
      #veditor {
        // 编辑框，只管驶入文本
        height: 130px;
        &::placeholder {
          /* Chrome, Firefox, Opera, Safari 10.1+ */
          color: #ccc;
          opacity: 1; /* Firefox */
        }

        &:-ms-input-placeholder {
          /* Internet Explorer 10-11 */
          color: #ccc;
        }

        &::-ms-input-placeholder {
          /* Microsoft Edge */
          color: #ccc;
        }
      }
      // 标签icon和预览icon所在的行
      .vrow {
        // 表情icon所在的span
        .vemoji-btn {
          fill: #0f0;
        }
        // 预览icon所在的span
        .vpreview-btn {
          fill: #0f0;
        }
      }
    }
    // 提交所在的行
    .vrow {
      // 提交按钮
      .vsubmit {
        color: #000;
        border: 1px solid #0f0;
      }
    }
    // 表情外框，内层是一大坨i标签
    .vemojis {
      max-height: 200px;
      i {
        width: 52px;
        img {
          max-width: 45px;
        }
      }
    }
  }
  // 所有评论的外框
  .vcards {
    // 单评论层，或单人评论(一层已有一个人，一层有多个人)
    .vcard {
      .vh {
        .vhead{
          .vnick{
            color: #0f0;
            &:hover{
              color: #0ff;
            }
          }
        }
        // 回复按钮和时间所在的行
        .vmeta {
          // 回复的span
          .vat {
            color: #0f0;
            padding-right: 10px;
          }
        }
        // 评论内容所在的外框
        .vcontent {
          img {
            max-width: 40px; // 放大评论区的标签大小
          }
        }
      }
    }
  }
  .vpage {
    // 加载更多的按钮
    .vmore {
      &:hover {
        color: #0f0;
        border-color: #0ff;
      }
    }
  }
  // vanlia的版权信息，没有职业素养的可以去除
  .vpower {
    padding-right: 10px;
    // display: none;
    a{
      color: #0f0;
      &:hover{
        color: #0ff;
      }
    }
  }
}
